<template>
  <view class="tree-item">
    <!-- 当前节点 -->
    <view class="tree-node" :style="{ paddingLeft: level * 36 + 'rpx' }">
      <view class="node-content">
        <!-- 展开/收起图标 -->
        <!-- 节点文本 -->
        <text class="node-text" @tap.stop="jump(nodeData)" :class="`tree-node-level-${level}`">
          {{ nodeData.name }}
          <text style="color: #3771fb">({{ nodeData.zy_wc }}/{{ nodeData.zy_total }})</text>
          <image class="image" v-if="nodeData.is_staduy" src="@/static/img02/14.png" alt="" />
        </text>
        <image
          @click="toggle"
          v-if="hasChildren"
          class="arrow"
          :class="{ expanded: isExpanded }"
          :src="isExpanded ? STATIC_URL + 'up.png' : STATIC_URL + 'down.png'"
          mode=""
        ></image>
      </view>
    </view>

    <!-- 子节点 -->
    <view v-show="isExpanded && hasChildren" class="children-container">
      <tree-item
        v-for="child in nodeData.children"
        :key="child.aid || child.name"
        @hand-item="$emit('hand-item', $event)"
        :nodeData="child"
        :level="level + 1"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'tree-item',
  props: {
    nodeData: {
      type: Object,
      required: true,
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isExpanded: this.level < 0, // 默认展开前两级
    }
  },
  computed: {
    hasChildren() {
      return this.nodeData.children && this.nodeData.children.length > 0
    },
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isExpanded = !this.isExpanded
      } else {
        // 没有子节点，点击后执行其他操作（如跳转题目）
        this.$emit('itemClick', this.nodeData)
      }
    },
    jump(item) {
      let aidList = item.aid
      this.$emit('hand-item', item)
    },
  },
}
</script>

<style scoped>
.tree-item {
  width: 100%;
}

.tree-node {
  padding: 25rpx 30rpx;
  /* border-bottom: 1rpx solid #f0f0f0; */
  background: white;
}

.tree-node:active {
  background-color: #f8f9fa;
}

.node-content {
  display: flex;
  align-items: center;
}

.arrow {
  width: 22rpx;
  height: 22rpx;
  margin-right: 15rpx;
  font-size: 24rpx;
  color: #666;
  transition: transform 0.3s ease;
}

.arrow.expanded {
  transform: rotate(0deg);
}

.arrow-placeholder {
  width: 30rpx;
  margin-right: 15rpx;
  color: #999;
  font-size: 20rpx;
  text-align: center;
}

.node-text {
  flex: 1;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.tree-node-level-0 {
  /* width: 322px;
	height: 45px; */
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  line-height: 45rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.question-count {
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 15rpx;
}

.children-container {
  background: #fafafa;
}
.image {
  width: 26rpx;
  height: 26rpx;
  // margin-top: 10rpx;
  margin-left: 16rpx;
}
</style>
